<template>
  <el-card class="task-detail-card" v-if="task">
    <div slot="header">任务详情</div>
    <div class="task-detail-content">
      <h3>{{ task.name }}</h3>
      <div class="detail-item">
        <span class="label">优先级：</span>
        <el-tag :type="task.priority === '高' ? 'danger' : (task.priority === '中' ? 'warning' : 'success')">
          {{ task.priority }}
        </el-tag>
      </div>
      <div class="detail-item">
        <span class="label">创建于：</span>
        {{ task.detail.createTime }}
      </div>
      <div class="detail-item">
        <span class="label">开始时间：</span>
        {{ task.detail.startTime }}
      </div>
      <div class="detail-item">
        <span class="label">截止时间：</span>
        {{ task.detail.endTime }}
      </div>
      <div class="detail-item">
        <span class="label">负责人：</span>
        {{ task.detail.owner }}
      </div>
      <div class="detail-item">
        <span class="label">参与人：</span>
        <el-tag
          v-for="(item, index) in task.detail.participants"
          :key="index"
          type="info"
        >{{ item }}</el-tag>
        <el-button type="text" @click="handleAddParticipant">+ 添加</el-button>
      </div>
      <div class="detail-item">
        <span class="label">状态：</span>
        <el-tag :type="task.status === '进行中' ? 'info' : 'success'">
          {{ task.status }}
        </el-tag>
      </div>
      <div class="action-buttons">
        <el-button type="primary" icon="el-icon-edit" @click="handleEdit">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="handleDelete">删除</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'TaskDetail',
  props: {
    task: {
      type: Object,
      default: null
    }
  },
  methods: {
    handleEdit () {
      this.$emit('task-edit', this.task);
    },
    handleDelete () {
      this.$emit('task-delete', this.task.id);
    },
    handleAddParticipant () {
      // 可弹窗添加参与人逻辑
      this.$message.info('添加参与人功能待实现');
    }
  }
}
</script>

<style scoped>
.task-detail-card {
  margin-top: 20px;
}

.task-detail-content {
  padding: 10px;
}

.detail-item {
  margin-bottom: 10px;
}

.label {
  font-weight: bold;
  display: inline-block;
  width: 80px;
}

.action-buttons {
  margin-top: 20px;
  text-align: right;
}
</style>
